<template>
  <el-dialog
    custom-class="adup-driver-staff-reim"
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    :close-on-click-modal="false"
    :visible="true"
    @close="closeMd"
    :title="setTitle"
    :width="winWidth"
    append-to-body>
    <el-tabs v-model="active" v-if="!myData.obj" @tab-click="onTabClick">
      <el-tab-pane label="团上开支" name="1" />
      <el-tab-pane label="加油报账" name="2" />
      <el-tab-pane label="维修保养报账" name="3" />
      <el-tab-pane label="无业务开支" name="4" />
    </el-tabs>

    <TravelItem 
      v-if="active === '1' && !myData.obj"
      @closeMd="closeMd"
      @reloadDg="reloadDg"
    />

    <UpdXcjz 
      v-if="active === '1' && myData.obj"
      :myData="myData"
      @closeMd="closeMd"
      @reloadDg="reloadDg"
    />

    <OilItem 
      v-if="active === '2'"
      :myData="myData"
      @closeMd="closeMd"
      @reloadDg="reloadDg"
    />

    <UpkeepItem 
      v-if="active === '3'"
      :myData="myData"
      @closeMd="closeMd"
      @reloadDg="reloadDg"
    />

    <NoTraffic 
      v-if="active === '4'"
      :myData="myData"
      @closeMd="closeMd"
      @reloadDg="reloadDg"
    />

  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";

import TravelItem from './travel-item'
import UpdXcjz from './upd-xcjz'
import OilItem from './oil-item'
import UpkeepItem from './upkeep-item'
import NoTraffic from './no-traffic'

export default {
  name: "AdupDriverStaffReim",
  directives: {elDragDialog},
  props: {myData: Object},
  components: {TravelItem, UpdXcjz, OilItem, UpkeepItem, NoTraffic},
  computed: {
    setTitle(){
      return this.myData.obj ? '驾驶员报账修改' : '驾驶员报账添加';
    }
  },
  data() {
    return {
      // 弹框宽度
      winWidth: 'auto',
      active: '1',
    };
  },
  created() {
    console.log('驾驶员报账', this.myData);

    let o = this.myData.obj;
    if(o) {
      const {reimTypeId} = o;
      switch (reimTypeId.typeMark) {
        case 'XCSZ': 
          this.active = '1';
          break
        case 'JYJZ': 
          this.active = '2';
          break
        case 'WXJZ': 
          this.active = '3';
          break
        default: this.active = '4';
      }
    }
  },
  methods: {
    // 关闭弹框
    closeMd() {
      this.$emit("myClick", {state: false});
    },
    // 刷新表格列表
    reloadDg() {
      this.$emit("reloadDg");
    },
    // tab点击事件
    onTabClick(e){
      let name = e.name;
      
      // if(name == '1'){
      //   this.winWidth = '70%';
      // }else if(name == '2'){
      //   this.winWidth = 'auto';
      // }else{
      //   this.winWidth = '70%';
      // }
    },
  },
};
</script>